<template>
  <div>
    <os-icon name="logout"></os-icon>
    <os-icon name="arrow"></os-icon>
    <div style="width: 100%">
      <os-button
        type="primary"
        size="medium"
        @click="getVal()"
        text="默认按钮"
      ></os-button>
      <os-button size="mini" icon="arrow"></os-button>
      <el-button @click="onClick">默认按钮</el-button>
      <os-dialog></os-dialog>
    </div>
    <el-form label-width="80px">
      <el-form-item label="活动名称">
        <os-select title="角色" field="roles" :value="mValue"  :multiple="true" :filterable="false" :options="options" />
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import OsSelect from '../../components/OsSelect.vue'
import Logo from './Logo.vue'
export default {
  components: { OsSelect },
  data () {
    return {
      mValue: [],
      dialogVisible: false,
      options: [{
        label: '热门城市',
        options: [{
          value: 'Shanghai',
          label: '上海'
        }, {
          value: 'Beijing',
          label: '北京'
        }]
      }, {
        label: '城市名',
        options: [{
          value: 'Chengdu',
          label: '成都'
        }, {
          value: 'Shenzhen',
          label: '深圳'
        }, {
          value: 'Guangzhou',
          label: '广州'
        }, {
          value: 'Dalian',
          label: '大连'
        }]
      }]
    }
  },
  created () {
    // this.getOptions()
  },
  mounted () {
    this.getOptions()
  },
  methods: {
    async getOptions () {
      const { data } = await this.$store.dispatch('system/roleAll')
      console.info('-----------data: ' + data)
      const options = data.map(item => ({ label: item.roleName, value: item.id }))
      this.options = [...options]
    },
    getVal () {
      return console.info('---')
    },
    async onClick () {
      this.$utils.dialog('标题', <Logo />, {
        btn: [{ text: '关闭' }],
        onClose: () => {
          console.log('关闭了')
        }
      })
      this.$nextTick(() => {
        // dom元素更新后执行，因此这里能正确打印更改之后的值
        console.info(this.$refs.osDialog) // 改变了的值
      })
    }
  }
}
</script>
